<template>
	<view>
			<view class="userpage-index">
        <!-- 顶部个人信息区域 -->
			  <view class="userpage-top">
          <!-- 头像 -->
			  		  <image class="userpage-top-avatar" :src="userAvatar" mode=""></image>
              <view class="userpage-top-userinfo">
                <view class="userpage-top-icon">
                  <!-- 昵称 -->
                  <text>{{userInfo.nickname ? userInfo.nickname : userinfo.nickName}}</text>
                  <!-- 图标 -->
                  <span class="iconfont icon-nan" v-if="userInfo.sex === 0"></span>
                  <span class="iconfont icon-nv" v-else></span> 
                </view>
                <text class="userinfo-phone">WeChat: {{userInfo.mobile}}</text>
              </view>
        </view>
        <view class="userpage-buttom" v-if="query.length !== 0">
          <view class="userpage-buttom-index" v-for="(item,index) in query" :key="index">
            <view class="userpage-buttom-item" @click="gotoItem(item.serialNumber)"> 
              <user-task :postItem="item" :uid="userId"></user-task>   
            </view>
          </view>
        </view>
        <view class="nullimage" v-else>
          <image src="https://s2.loli.net/2022/05/05/r2qiah46pZPYK1O.png" mode=""></image>
          <text>空空如也</text>
        </view>
			</view>
	</view>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  export default {
    name:"user-page",
    data() {
      return {
        query: [],//用户任务
        userId: '',//用户id
        userAvatar: '',//用户头像
        userInfo: {},
        //上拉刷新
        total: 0,
        pagenum: 1,
        pagesize: 10,
        flag: false,
      }
    },
    computed: {
      ...mapState('user_module',['userinfo'])
    },
    methods: {
      // 获取全部组队
      async getTaskList() {
        const {data:{data:{message:res}}} = await uni.$http.post('/api/task/getRelease').catch(err => uni.$showMsg('网络错误！'))
        let a = res
        //过滤null
        a = a.filter(item => item !== null)
        this.query = [...this.query,...a.reverse()]
      },
      // 获取个人信息
      async getUserInfo() {
        const {data:res} = await uni.$http.get('/get/memberInfo/by/' + this.userId).catch(err => uni.$showMsg('网络错误！'))
        this.userInfo = res
      },
      // 获取正在组队中的组队
      async getUserTasks() {
        const {data:res} = await uni.$http.get('/get/runningTasks/by/' + this.userId + '/' + this.pagenum).catch(err => uni.$showMsg('网络错误！'))
        this.query = [...this.query,...res.records]
      },
      // 前往详情页
      gotoItem(serialNumber) {
        uni.navigateTo({
          url: '../postitem/postitem?id=' + serialNumber
        })
      },
      // 上拉触底回调
      onReachBottom() {
        if(this.pagenum * this.pagesize >= this.total) {
          uni.$showMsg('已经到底了哦~')
          return
        }
        console.log('触发上拉触底刷新')
        if(this.flag) return
        uni.showLoading({
          title: '加载中...'
        })
        this.pagenum += 1
        this.getUserTasks()
      },
    }, 
    onLoad(e) {
      this.userId = e.id
      this.userAvatar = e.avatar
      let uid = uni.getStorageSync('userId')
      if(uid === this.userId) this.getTaskList()
      else this.getUserTasks()
      this.getUserInfo()
    }
  }
  
</script>

<style lang="scss">
  .userpage-index {
    .userpage-top {
      display: flex;
      align-items: center;
      height: 165px;
      padding-bottom: 20px;
      border-radius: 0 0 10% 10%;
      background: linear-gradient(to bottom right, #FCE86A, pink);
      .userpage-top-avatar {
        margin-left: 20px;
        height: 180rpx;
        width: 180rpx;
        border-radius: 90rpx;
        margin-right: 8px;
      }
      .userpage-top-userinfo {
        display: flex;
        flex-direction: column;  
        text {
          display: block;
          margin-left: 10px;
          font-size: 17px;
          font-weight: 700;
          color: white;
        }
        // 顶部名称和性别图标
        .userpage-top-icon {
          display: flex;
          align-items: center;
        }
        .userinfo-phone {
          font-size: 13px;
          margin-top: 5px;
        }
      }
    }
    .userpage-buttom {
      margin: 25px 0;
      .userpage-buttom-item {
        margin: 0 10px;
      }
    }
    .nullimage {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 50% 0;
        text {
          font-size: 14px;
          color: #A5A5A5;
        }
        image {
          width: 160rpx;
          height: 120rpx;
        }
      } 
    }
</style>
